<template>
  <div class="ek-input">
    <el-input 
      type="text"
      v-model="value" 
      @blur="blur" 
      @focus="focus"
      @change="change"
      @clear="clear"
      @input="input" 
      :placeholder="placeholder"
      :disabled="disabled"
      :clearable="clearable"
      :size="size"
      :show-password="showPassword"
     />
  </div>
</template>

<script setup>
import {
  defineProps,
  defineEmits,
  computed,

} from "vue";

const props = defineProps({
  // 值
  modelValue:{
    type: [String, Number],
    default: "",
  },
  // 禁用
  disabled: {
    type: Boolean,
    default: false,
  },
  // 是否显示清除
  clearable: {
    type: Boolean,
    default: true,
  },
  // 默认显示
  placeholder: {
    type: String,
    default: "请输入",
  },
  size: {
    type: String,
    default: 'default'
  },
  showPassword: {
     type: Boolean,
    default: false,
  }

});


const emit = defineEmits(['update:modelValue','blur','focus','change','input','clear'])

const value = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})

// 失去焦点
function blur(event) {
  emit('blur', event)
};
// 聚焦
function focus(event) {
  emit('focus', event)
};
// 改变事件
function change(event) {
  emit('change', event)
};
// 实时改变事件
function input(event) {
  emit('input',event)
};

// 清除事件
function clear() {
  emit('clear')
};


// todo 限制长度

</script>

<style scoped lang="scss"></style>
